<template>
  <div class="pages stockcheckList">
    <div class="pageLevel" v-if="!sub">
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form  label-width="90px" class="demo-ruleForm">
          <el-form-item label="" label-width="0px">
            <el-input placeholder="输入仓库编号或仓库名称搜索" v-model="inventoryData.keyWord" size="small"></el-input>
          </el-form-item>
          <el-form-item label="盘点类型:"  >
            <el-select v-model="inventoryData.inventoryType" placeholder="全部" size="small">
              <el-option label="全部" value=""></el-option>
              <el-option label="日盘" value="0"></el-option>
              <el-option label="周盘" value="1"></el-option>
              <el-option label="月盘" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="盘点状态:" >
            <el-select v-model="inventoryData.inventoryStatus" placeholder="全部" size="small">
              <el-option label="全部" value=""></el-option>
              <el-option label="未开始" value="0"></el-option>
              <el-option label="进行中" value="1"></el-option>
              <el-option label="未审核" value="2"></el-option>
              <el-option label="审核通过" value="3"></el-option>
              <el-option label="审核驳回" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="盘点时间:" class="billdata">
            <el-date-picker size="small" v-model="inventoryData.inventoryTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="" label-width="20px">
            <el-button type="primary" size="mini" @click="inventoryQuery" class="Button">查询</el-button>
          </el-form-item>
          <el-form-item label="" label-width="20px">
            <el-button type="primary" size="mini"  v-if="setRole('新增盘点')"  @click="routerPush()">新增盘点</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="inventoryTableData" stripe style="width: 100%">
         <el-table-column prop="warehouseCode"  label="仓库编号" align="center">
         </el-table-column>
         <el-table-column prop="warehouseName" label="仓库名称" align="center">
         </el-table-column>
         <el-table-column prop="inventoryType" label="盘点类型" :formatter="inventoryType" align="center">
         </el-table-column>
         <el-table-column prop="inventoryStatus" label="盘点状态" :formatter="inventoryStatus" align="center">
         </el-table-column>
         <el-table-column prop="createTime" :formatter="createTime" label="盘点时间" align="center">
         </el-table-column>
        <el-table-column prop="userName" label="操作员" align="center">
         </el-table-column>
         <el-table-column prop="name" align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="small" v-if="scope.row.inventoryStatus=='0'&&setRole('盘点')" @click="stareInventory(scope.row.id,scope.row.inventoryStatus,scope.row.inventoryPattern)" type="text" class="addDetail">开始盘点</el-button>
              <el-button size="small" v-if="scope.row.inventoryStatus=='1'&&setRole('盘点')" @click="continueInventory(scope.row.id,scope.row.inventoryStatus,scope.row.inventoryPattern)" type="text" class="addDetail">继续盘点</el-button>
              <el-button size="small" v-if="scope.row.inventoryStatus=='4'&&setRole('驳回修改')" @click="handleEdit(scope.row.id,scope.row.inventoryStatus,scope.row.inventoryPattern,'2')" type="text" class="addDetail">修改</el-button>
              <el-button size="small" v-if="scope.row.inventoryStatus=='4'&&setRole('驳回查看')" @click="handlelook(scope.row.id,scope.row.inventoryStatus,scope.row.inventoryPattern,'1')" type="text" class="addDetail">查看</el-button>
              <el-button size="small" v-if="scope.row.inventoryStatus=='3'||scope.row.inventoryStatus=='2'" @click="handlelook(scope.row.id,scope.row.inventoryStatus,scope.row.inventoryPattern)" type="text" class="addDetail">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20,30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from '@/util'
import u from '@/util/state'
import { inventoryListPage } from "@/api";
export default {
  computed: mapState(["sub", "merchantId","power"]),
  data() {
    return {
      inventoryType:u.inventoryType,
      inventoryStatus:u.inventoryStatus,
      inventoryData: {
        keyWord: "",
        inventoryType: "",
        inventoryStatus: "",
        inventoryTime: []
      },
      inventoryTableData: [],
      // 分页开始
      total: 0,
      pageSize: 20,
      totalItems: 0,
      currentPage: 1
    };
  },
  mounted() {
    this.inventoryList(this.pageSize, this.currentPage);
  },
  watch: {
        sub: {
            handler: function(val, oldVal){
                if (oldVal != null && val == false) {
                  this.inventoryList(this.pageSize, this.currentPage);
                  // this.inventoryData.inventoryTime=[]
                }
            },
            deep: true
        },
    },
  methods: {
      //配置权限
    setRole (key) {
      return util.selectTitle(this.power, key)
     },
        //转时间戳
    createTime(row, column) {
      return util.foryear(row.createTime) + ' ' + util.fortime(row.createTime)
    },
    // 盘点列表
    inventoryList(pageSize, pageNum) {
      if (this.inventoryData.inventoryTime.length == 0) {
        this.inventoryData.inventoryTime[0]='';
        this.inventoryData.inventoryTime[1]='';
      }
     let data={
          shopId:this.merchantId,
          keyword:this.inventoryData.keyWord,
          inventoryType:this.inventoryData.inventoryType,
          inventoryStatus:this.inventoryData.inventoryStatus,
          startTime:this.inventoryData.inventoryTime[0],
          endTime:this.inventoryData.inventoryTime[1],
          pageNum:pageNum,
          pageSize:pageSize,
      }
      inventoryListPage(data).then(res => {
        this.inventoryTableData = res.data.list;
        this.totalItems = res.data.pageTotal;
      });
    },
    // 查询按钮
    inventoryQuery() {
      this.currentPage=1;
      this.inventoryList(this.pageSize, this.currentPage);
    },
    // 新增盘点
    routerPush(name, param) {
      util.routerTo('/order-center/stock-management/stock-checkList/stock-checkAdd')
    },
    // 开始盘点
    stareInventory(id="",updateInventoryStatus='',inventoryPattern=''){
      util.routerTo('/order-center/stock-management/stock-checkList/stock-inventoryTaking',{
        id:id,
        status:updateInventoryStatus,
        type:inventoryPattern,

      })
    },

    // 继续盘点
    continueInventory(id="",updateInventoryStatus='',inventoryPattern=''){
      util.routerTo('/order-center/stock-management/stock-checkList/stock-inventoryTaking',{
        id:id,
        status:updateInventoryStatus,
        type:inventoryPattern,

      })
    },
        // 未审核和已审核查看页面
    handlelook(id="",updateInventoryStatus='',inventoryPattern='',showLook=''){
      util.routerTo('/order-center/stock-management/stock-checkList/stock-inventoryDetails',{
        id:id,
        status:updateInventoryStatus,
        type:inventoryPattern,
        showLook:showLook

      })
    },
    // 修改
    handleEdit(id="",updateInventoryStatus='',inventoryPattern='',showLook=''){
      util.routerTo('/order-center/stock-management/stock-checkList/stock-inventoryDetails',{
        id:id,
        status:updateInventoryStatus,
        type:inventoryPattern,
        showLook:showLook

      })
    },
    //跳页
    toPage() {
      his.currentPage = 1;
      this.inventoryList(this.pageSize, this.currentPage);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.inventoryList(this.pageSize,this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.inventoryList(this.pageSize, this.currentPage);
    }
  }
};
</script>
<style>
.billdata .el-date-editor .el-range__close-icon {
  display: none;
}
</style>
